<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title><?php echo $gdata['title'] ?></title>

<!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
<link rel="stylesheet" href="default.css" type="text/css" />
 
 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'clean',
    custom_theme_widget: 'recaptcha_widget'
 };
 </script>

</head>
<body>
    <div id="container">

        <div id="header">
            <h1>Anonymous messages board</h1>
            <p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
        </div>

        <div id="content">
            <h2>Message is here</h2>
            <p>
                <form action="" method="post">
                <input id="tb_message_id" type="text" maxlength="36"/>
                 <div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=6LezncsSAAAAAKzy4LGOcpiqO_WXXvb0vevom_PS">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LezncsSAAAAAKzy4LGOcpiqO_WXXvb0vevom_PS"
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>
                </form>
            </p>
            <h2>Min-height</h2>
            <p>
                The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the fysical elements to create such a visual effect. If you're not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes.
            </p>
            <h2>Relative positioning</h2>
            <p>
                Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
            </p>
            <h2>Padding-bottom</h2>
            <p>
                Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.
            </p>
            <p>
                Scale the text size a bit or resize your browser window to test this layout. The <a href="css/layout1.css">CSS file is over here</a>.
            </p>
            <p>
                <a href="../css.html">Back to CSS Examples</a>
            </p>
        </div>
        <div id="footer">
        <p>All data is here in public domain. Site owner is not responsible for publication. <a href="/feedback/">Feedback</a></p>
        </div>
    </div>
</body>
</html>













<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">

#message {
    width: 40em;
    display: block;
}

</style>
</head>
<body>

<div class="main">


<div class="head">
	<div class="location_bar">
	<a href="/hobby/">t3h1337.org</a> &rarr; <a href="/hobby/bb/">ananymous board</a>  &rarr; <a href="/hobby/bb/a9s39df">thread #a9s39df</a> 
	</div>
    
<div id="form_container">
    <form action="" method="post">
       <div>
       <textarea id="message"></textarea>
       <label for="user_nickname">User: </label><input id="user_nickname" name="user_nickname" maxlength="64" type="text" />
	   <label for="user_password">Key: </label><input id="user_password" name="user_password" maxlength="32" type="password"/>
	   <button type="submit">Submit</button>
	   </div>
    </form>
	</div>
</div>


</div>
</body>
</html>